<html>
<html>
<head>
    <meta charset="utf-8" />
    <title>收货地址页面</title>
</head>
<body>
添加收货地址
<br>
<!--onsubmit="handleSubmit()"-->
<table class="table">
    <tbody>
    <form action="/address/insertAddress" method="post" onsubmit= "">
    <tr>
        <td></td>
        <td></td>
        <td><span>请选择所在省：</span>
                <select id="province" name="province" onchange="getCities()">
<!--                <option value="province">请选择</option>-->
                <option value="province :${province}" th:value="${province}" th:text="${province}">请选择</option>
            </select>
        </td>

        <td><span>请选择所在市：</span>
            <select id="city" name="city" onchange="getAreas()">
                <option value="city.value">请选择</option>
            </select>
        </td>
        <td> <span>请选择所在县区：</span>
            <select id="area" name="countyTown">
                <option value="">请选择</option>
            </select>
        </td>
        <!-- 示例：创建一个文本输入框 -->
<!--        *<input type="text" name="addressDetails" placeholder="详细地址与门牌号">-->
        *<label for="message">信息:</label>
        <textarea id="message" name="addressDetails" rows="10" cols="30">详细地址与门牌号</textarea></br>
        *<input type="text" name="username" placeholder="收货人姓名">
        *<input type="text" name="phone" placeholder="收货人手机号">

    </tr>
        <li class="ent">
            <button class="btn2" type="submit"><a class="a">保存地址</a></button>
        </li>
    </form>
    </tbody>

</table>
<hr/>
<script>

    // 获取省份数据的函数
    function getProvinces() {
        fetch("http://localhost:18080/dgtxPlaces/linkage")
            .then(response => response.json())
            .then(data => {
                const provinceSelect = document.getElementById('province');
                data.forEach(province => {
                    const option = document.createElement('option');
                    option.value = province.id;
                    option.text = province.cname;
                    provinceSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取省份数据时出错：', error);
            });
    }

    // 根据选择的省份获取城市数据
    function getCities() {
        const selectedProvinceId = document.getElementById('province').value;
        const url = 'http://localhost:18080/dgtxPlaces/getSecondaryList?parentId='+selectedProvinceId;
        fetch(url)
            .then(response => response.json())
            .then(data => {
                const citySelect = document.getElementById('city');
                citySelect.innerHTML = '<option value="">请选择城市</option>';
                data.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.id;
                    option.text = city.cname;
                    citySelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取城市数据时出错：', error);
            });
    }

    // 根据选择的城市获取区域数据
    function getAreas() {
        const selectedCityId = document.getElementById('city').value;
        const uri2 = 'http://localhost:18080/dgtxPlaces/getSecondaryList?parentId='+selectedCityId;
        fetch(uri2)
        // fetch(`后端获取区域的接口 URL?cityId=${selectedCityId}`)
            .then(response => response.json())
            .then(data => {
                const areaSelect = document.getElementById('area');
                areaSelect.innerHTML = '<option value="">请选择区域</option>';
                data.forEach(area => {
                    const option = document.createElement('option');
                    option.value = area.id;
                    option.text = area.cname;
                    areaSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取区域数据时出错：', error);
            });
    }



    function handleSubmit(){
        var selectElement = document.getElementById("province");
        var selectedValue = selectElement.options[selectElement.selectedIndex-1].value;
        var name = selectElement.options[selectedValue].text;
        //getCityValue();
        alert("选中的省份为"+ name)

    }
    // 页面加载时获取省份数据
    window.onload = getProvinces;
</script>


</body>
</html>